﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GroupDetail.aspx.cs" Inherits="GroupDetail" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  <style type="text/css">
      body
      {
          background-color: black;
          color: white;
      }
    .Groupfloating { float:left; }
.Groupfloating img 
{
     display: block;
     margin-top:10px; margin-bottom:10px;     
      height:270px;
      width:558px;
      margin-right:10px;
}
 .GroupThumbImage { float:left;}
.GroupThumbImage img
{  
display: block;
     margin-top:10px;     
      height:150px;
      width:150px;
      margin-right:10px;

}
.pageHeader
{
    font-family:Segoe UI Light;
    font-size:42pt;
    }
    .pageSubHeader
    {
        font-family:Segoe UI Light;
        font-size:20pt;
      
        }
        a
        {
           text-decoration:none;
           color:Black;
            }
          p
{
    font-family: Segoe UI;
    font-size:11pt;
    }
   img:hover
{

    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
  
}
    .tagTitle
    {
    font-family: Segoe UI;
    font-size:9pt;
    color:gray;
    }
      #container
      {
          overflow-x:scroll ;
          overflow-y: hidden;
          padding-bottom:10px;

      }
  </style>
    <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function adaptSize() {
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            $("#container").height(windowHeight - 110);
        }

        $(document).ready(function () {
            adaptSize();
        });
        $(window).resize(adaptSize);
    </script>
</head>
<body>
       <form id="form1" runat="server">
  
   <div class="pageHeader" style="margin-left:50px; margin-top:20px;"><a href="Home.aspx">
       <img src="Resources/back.png" style="height: 42px; margin-right:30px;" /></a><asp:Label ID="lblGroupName" runat="server"></asp:Label></div>
<div id="container">
    
    <div style="width:550%; height:500px">
     <div style="margin-top:14px; margin-left:50px;margin-right:50px; float:left;">
    <asp:DataList ID="DataList2" runat="server" RepeatDirection="Horizontal"
             onitemcommand="DataList2_ItemCommand" 
             onitemdatabound="DataList2_ItemDataBound" Width="434px">
    <ItemTemplate>   
    <div class="Groupfloating"> 
  <img src='<%#Eval("GroupThumbPath") %>'/>
  </div>
  <br />
  <div>
  <p><%#Eval("GroupDsc") %></p>
  </div>
  </ItemTemplate>
  </asp:DataList>
    </div>
        <div style="float:left; margin-left:50px;">
        <asp:DataList ID="ImageList" runat="server" RepeatColumns="4" 
                onitemcommand="ImageList_ItemCommand">   
 <ItemTemplate>
 <div class="GroupThumbImage">
 <asp:LinkButton ID="lnkThumbDetail" runat="server"  CommandName="thumbDetail" CommandArgument='<%#Eval("ItemID") %>'> <img src='<%#Eval("ItemThumbPath") %>' alt=''/></asp:LinkButton> 
 </div>  
  <div class="GroupThumbImage" style="margin:3px; height:150px; width:250px;">
  <p><%#Eval("ItemTitle") %></p>
  <span class="tagTitle"><%#Eval("ItemTag") %></span>
   <div><p><%#GetSmallContents(Eval("ItemDsc").ToString(), 130)%></p></div>
  </div>
   </ItemTemplate>
   </asp:DataList>
        </div>  
    </div>
</div>
  

    </form>
</body>
</html>
